import React from 'react'
import GeoMapWidget from 'lib/components/GeoWidget.jsx'
import DefaultLoadingElement from 'lib/util/defaultLoadingElement.jsx'
import DefaultNoDataElement from 'lib/util/defaultNoDataElement.jsx'
import DefaultErrorElement from 'lib/util/defaultErrorElement.jsx'

import _ from 'underscore'
import deepExtend from 'lib/util/deepExtend';
import { findDOMNode } from 'react-dom';

var Highcharts = require('highcharts');

var defaultOption = {
  chart:{
    spacing:[0,0,0,0],
    type: 'map',
    backgroundColor:'rgba(0, 0, 0, 0)',
    plotBorderWidth:0,
    style:{
      fontFamily: '"Open Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif',
      color: '#fff'
    }
  },
  title: {
    text: null
  },
  credits:{
    enabled:false
  },
  mapNavigation:{
    enabled: false,
    buttonOptions: {
        verticalAlign:'bottom'
    },
    margin:0,
    padding:0
  },
  colorAxis:{
    enabled:true,
    min:0,
    minColor:'#56bc76',
    maxColor:'#e5603b',
    labels:{
      style:{
        color:'rgba(248,248,248,1)',
        whiteSpace: 'nowrap',
        fontSize: 11,
        fontWeight: 'normal',
        fontFamily: '"Open Sans", sans-serif'
      }
    }
  },
  legend:{
    enabled:true,
    align:'center',
    itemStyle: {
      color:'#f8f8f8',
      fontWeight: 'normal',
      fontSize: 13,
      width: 150,
      textOverflow: 'ellipsis',
      overflow: 'hidden',
      whiteSpace: 'nowrap'
    },
    itemHoverStyle: {color: '#f8f8f8',fontWeight: 'bold'},
    itemHiddenStyle: {color: 'rgba(255,255,255,0.4)'}
  },
  tooltip:{
    backgroundColor:'rgba(0,0,0,0.4)',
    borderWidth: 0,
    shadow: false,
    borderRadius: 5,
    style: {color: '#fff',fontSize: 12},
    zIndex:8,
    fontFamily: '"Open Sans","Hiragino Sans GB","Microsoft Yahei",sans-serif'
  }
}

var whiteBgMixin = {
  colorAxis:{
    min:0,
    labels:{
      style:{
        color:'rgba(102,102,102,1)',
        fontWeight: 300,
        fontFamily: '"Open Sans", sans-serif',
        whiteSpace: 'nowrap',
        fontSize: 11
      }
    }
  },
  legend:{
    itemStyle:{
      color:'#666666'
    },
    itemHoverStyle: {color: '#666666',fontWeight: 'bold'},
    itemHiddenStyle: {color: 'rgba(102,102,102,0.5)'}
  }
}

class Map extends React.Component{
  constructor(props){
    super(props)

    this.state = _.extend({},defaultOption,{
      chart:_.extend({},defaultOption.chart,this.props.chart),
      legend:_.extend({},defaultOption.legend,this.props.legend),
      colorAxis:_.extend({},defaultOption.colorAxis,this.props.colorAxis),
      plotOptions:{
        series:{
          lineWidth: 2.5,
          dashStyle: 'solid',
          dataLabels:{
            allowOverlap:(this.props.allowOverlap)
          },
          marker:{
            symbol:'circle',
            radius:1
          }
        }
      },
      series:[_.extend({
        name:'map',
        cursor:this.props.pointClick ? 'pointer':'',
        point: {
          events: {
            click: this.props.pointClick?this.props.pointClick:null
          }
        },
        states: {
          hover: {
            color: 'rgba(0, 110, 195, 0.6)'
          }
        },
        dataLabels: {
          enabled: true,
          color: '#666',
          format: '{point.name}'
        }
      },this.props.data)],
      tooltip:_.extend({},defaultOption.tooltip,{
        formatter:this.props.tooltipFormat
      })
    },this.props.options);
  }
  renderChart () {
    var config = this.state
      , el = findDOMNode(this)
      , isWhiteBg = $(el).parents('.widget-float').length

    config = deepExtend({},config, {
      chart: {
        renderTo: el
      }
    });
    if(isWhiteBg){
      config = deepExtend({}, config, whiteBgMixin)
    }
    // console.log(config);
    return new Highcharts.Map(config);
  }
  componentDidMount() {
    this.chart = this.renderChart();
  }
  componentWillUnmount() {
    this.chart.destroy();
    this.chart = null;
  }
  render() {
    return <div />
  }
}

export default class GeoMapWidget2 extends GeoMapWidget {
  renderLoading(){
    if (this.props.chart.height) {
      return <DefaultLoadingElement height={this.props.chart.height} />
    } else {
      return <DefaultLoadingElement />
    }
  }
  renderError(){
    if (this.props.chart.height) {
      return <DefaultErrorElement height={this.props.chart.height} />
    } else {
      return <DefaultErrorElement />
    }
  }
  renderChart(data){
    return (
      <Map
        chart={this.props.chart}
        data={data}
        dataLabelOverlap={this.props.dataLabelOverlap}
        colorAxis={this.props.colorAxis}
        pointClick={this.props.onPointClick}
        legend={this.props.legend}
        tooltipFormat={this.props.tooltipFormat}
        allowOverlap={this.props.allowOverlap}
      />
    )
  }
  render(){
    if(this.props.store.loading){
      return this.renderLoading(this.props.store.params);
    }else if(this.props.store.error){
      return this.renderError(this.props.store.error)
    }else if(this.props.store.data){
      if(this.props.store.data.length){
        return this.renderChart(this.props.store);
      }else{
        if (this.props.chart.height) {
          return <DefaultNoDataElement height={this.props.chart.height} />
        } else {
          return <DefaultNoDataElement />
        }
      }
    }else{
      return null
    }
  }
}

GeoMapWidget2.defaultProps = _.extend({}, GeoMapWidget.defaultProps, {
  chart:{}
})
